body {
    background-color: #f6f7f8;
}

/* 战略合作 */

.lead-wrapper {
    margin-top: 40px;
    background-color: #fff;
    overflow: hidden;
}

.strategic-bg {
    background-image: url('../images/cooperation-bg.jpg');
    background-size: cover;
    overflow: hidden;
}

.lead-title h3 {
    font-size: 60px;
    font-weight: bold;
    font-stretch: normal;
    color: #f2eff1;
    opacity: 0.5;
}

.lead-title h4 {
    font-size: 34px;
    color: #333333;
    margin-top: -35px;
    z-index: 1;
}

.lead-common-content {
    width: 855px;
    margin: 72px auto 0 auto;
    padding-bottom: 80px;
}

.lead-common-content img {
    width: 100%;
}

.crumbs-right-active {
    display: block;
    border-bottom: 2px solid #f8c30b;
}

/* 领先技术 */

.tab-wrapper {
    display: flex;
    justify-content: space-between;
}

.tab-wrapper p {
    width: 32%;
    padding: 15px;
    text-align: center;
    background-color: #f0f0f0;
    border-radius: 4px;
    color: #333333;
    font-size: 18px;
}

.technical-features-left {
    width: 30%;
    display: flex;
}

.technical-title {
    font-size: 24px;
    color: #333333;
}

.technical-line {
    display: block;
    width: 86px;
    height: 3px;
    background-image: url('../images/icon/icon-line.png');
}

.technical-line-dark {
    display: block;
    width: 86px;
    height: 3px;
    background-image: url('../images/icon/icon-line-dark.png');
}

.technical-line-wrapper {
    display: flex;
    margin-top: 20px;
}

.technical-p {
    margin-top: 14px;
    line-height: 29px;
    color: #333333;
    font-size: 16px;
}

.technical-p p {
    display: flex;

}

.technical-p p::before {
    display: block;
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-image: linear-gradient(0deg, #f8c30b 0%, #ffcf29 100%);
    margin-right: 7px;
    margin-top: 16px;
}

.tab-content {
    margin-top: 60px;
}

.tab-content-t {
    display: flex;
}

.technical-features-right {
    margin-top: 10px;
    margin-left: 98px;
    display: flex;
    justify-content: space-between;
  
}

.technical-features-right div{

    width: 48%;
    max-height: 350px;
}

.technical-features-right img {
    width: 100%;
    box-shadow: 0px 0px 10px 5px rgb(208 208 208 / 35%);
    border-radius: 8px;
}

.tab-content-b {
    margin-top: 70px;
}

.tab-content-b ul {
    display: flex;
    justify-content: space-between;
    margin-top: 35px;
}

.tab-content-b ul li {
    width: 32%;
}

.tab-content-b ul li img {
    width: 100%;
    box-shadow: 0px 0px 10px 5px rgb(208 208 208 / 35%);
    border-radius: 8px;
}

.tab-content-b ul li p {
    padding: 20px 0;
    color: #333333;
    font-size: 16px;
    display: flex;
    align-items: center;
}

.tab-content-b ul li p::before {
    content: '';
    width: 18px;
    height: 0px;
    border: solid 1px #999999;
    background-color: #999999;
    margin-right: 10px;
}

/* contact-us */

.contact-us {
    width: 1117px;
    margin: 66px auto 70px auto;
    display: flex;
    height: 425px;
}

.contact-us-l {
    width: 65%;
    background-image: url('../images/VCG41N1250001989.jpg');
    padding: 50px 188px 0 59px;
    line-height: 30px;
    letter-spacing: 0px;
    color: #ffffff;
}

.contact-us-l h2 {
    font-size: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid#ffffff;
}

.contact-us-l p {
    display: flex;
    align-items: center;
}

.contact-us-l p::before {
    content: '';
    width: 25px;
    height: 25px;
    margin-right: 10px;
}

.us-l {
    font-size: 18px;
    margin-top: 30px;
}

.us-icon::before {
    background-image: url('../images/icon/headset.png');
    background-repeat: no-repeat;
    background-position: center;
}

.us-emial::before {
    background-image: url('../images/icon/emial.png');
    background-repeat: no-repeat;
    background-position: center;
}

.us-location::before {
    background-image: url('../images/icon/location.png');
    background-repeat: no-repeat;
    background-position: center;
}

.contact-us-r {
    width: 35%;
    background-image: url('../images/VCG211254795004.jpg');
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.contact-us-r img {
    width: 65%;
}

.contact-us-r p {
    font-size: 22px;
    color: #ffffff;
    margin-top: 30px;
}

/* product */

.product-left img {
    width: 100%;
}

.product-container {
    margin-top: 40px;
}

.product-wrapper {
    background-color: #ffffff;
    display: flex;
    padding: 30px;
    margin-bottom: 30px;
}

.product-right {
    margin-left: 55px;
}

.product-right p {
    margin-top: 29px;
    width: 605px;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 34px;
    color: #333333;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.view-details {
    width: 100px;
    margin-top: 31px;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #666666;
    font-size: 16px;
}

.view-details span {
    display: block;
    width: 20px;
    height: 5px;
    background-image: url('../images/icon/icon-left.jpg');
    background-repeat: no-repeat;
    margin-left: 8px;
}

.view-details:hover {
    color: #f0ba00;
}

.view-details:hover .icon-left {
    background-image: url('../images/icon/icon-left-light.jpg');
}

.product-tab-wrapper ul {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
}

.product-tab {
    width: 31.5%;
    padding: 15px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    color: #333333;
    font-size: 16px;
    cursor: pointer;
}

.product-tab span {
    display: block;
    margin-right: 10px;
}

.product-tab span:nth-child(1) {
    display: none;
}

.product-tab-active {
    background-color: #f0ba00 !important;
    color: #fff !important;
}

.product-tab-active span:nth-child(1) {
    display: block;
}

.product-tab-active span:nth-child(2) {
    display: none;
}

/* 交流bar */

.exchange-wrapper {
    margin-top: 40px;
    padding: 40px 30px 80px 30px;
    background: #fff;
}

.exchange-wrapper h3 {
    display: block;
    font-size: 22px;
    color: #333333;
    margin: 0 auto;
    text-align: center;
    border-bottom: 1px solid #f2f2f2;
    padding-bottom: 25px;
}

.exchange-wrapper form {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin-top: 30px;
}

.exchange-wrapper form textarea {
    background-color: #f6f6f6;
    border: 1px solid #cccc;
    outline: none;
    padding: 16px
}

.exchange-wrapper form div {
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;
}

.exchange-wrapper form div input {
    width: 171px;
    height: 41px;
    background-color: #ffffff;
    border-radius: 4px;
    border: solid 1px #cccc;
    outline: none;
    cursor: pointer;
}

.exchange-wrapper form div input:hover {
    background: #f8c30b;
    color: #fff;
}

.exchange-wrapper form div input:nth-child(1) {
    margin-right: 75px;
}

.customer-message-wrapper {
    background-color: #f6f6f6;
    border-radius: 4px;
    margin-top: 30px;
    padding: 40px 30px;
}

.message-title-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.message-title-wrapper div {
    display: flex;
}

.message-title-wrapper div span {
    font-size: 16px;
    line-height: 36px;
    color: #333333;
    flex-shrink: 0;
}

.message-title-wrapper div p {
    font-size: 16px;
    line-height: 36px;
    color: #f8c30b;
}

.message-content-wrapper {
    display: flex;
}

.message-content-wrapper span {
    display: block;
    font-size: 16px;
    line-height: 36px;
    color: #333333;
    flex-shrink: 0;
}

.message-time {
    font-size: 12px;
    color: #999999;
}

.message-content-wrapper p {
    font-size: 14px;
    line-height: 30px;
    color: #666666;
    display: flex;
    align-items: center;

}

/* 应用案例 */

.cases-wrapper {
    height: 800px;
    background-image: url('../images/case-1.jpg');
    overflow: hidden;
}

.cases-wrapper div {
    width: 635px;
    margin: 0 auto;
    margin-top: 249px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.cases-wrapper div img {
    margin-top: 113px;
}

.cases-wrapper div p {
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 36px;
    letter-spacing: 0px;
    color: #ffffff;
    text-align: center;
}

.cases-one-wrapper {
    height: 800px;
    background-image: url('../images/case-2.jpg');
    overflow: hidden;
}

.cases-one-wrapper section {
    width: 1040px;
    margin: 287px auto 0 auto;
    display: flex;
    justify-content: space-between;
}

.cases-one-wrapper section div:nth-child(2) {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.cases-one-wrapper h3 {
    margin-top: 22px;
    font-size: 30px;
    color: #333333;
    display: flex;
    flex-direction: column;
}

.cases-one-wrapper h3::after {
    margin-top: 29px;
    content: '';
    width: 122px;
    height: 3px;
    background-color: #f8c30b;
}

.cases-one-wrapper p {
    width: 277px;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 30px;
    letter-spacing: 0px;
    color: #333333;
    margin-top: 71px;
    text-align: right;
}

.cases-two-wrapper {
    height: 800px;
    background-image: url('../images/case-3.jpg');
    overflow: hidden;
}

.cases-two-wrapper section {
    width: 1197px;
    margin: 224px auto 0 auto;
}

.cases-two-wrapper h3 {
    margin-top: 22px;
    font-size: 30px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
}

.cases-two-wrapper h3::after {
    margin-top: 29px;
    content: '';
    width: 122px;
    height: 3px;
    background-color: #f8c30b;
}

.cases-two-wrapper section {
    display: flex;
    flex-wrap: wrap;
}

.cases-two-wrapper section div:nth-child(1) {
    display: flex;
    flex-direction: column;
    width: 400px;
    font-family: MicrosoftYaHei;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 36px;
    letter-spacing: 0px;
    color: #ffffff;
}

.cases-two-wrapper section div:nth-child(2) {
    display: flex;
    margin-left: 114px;
}

.cases-two-wrapper section div p {
    margin-top: 70px;
}

.cases-two-wrapper section div span {
    display: block;
    width: 120px;
    height: 56px;
    font-family: MicrosoftYaHei;
    font-size: 20px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 25px;
    letter-spacing: 0px;
    color: #ffffff;
    position: relative;
}

.circle {
    display: block;
    width: 10px;
    height: 10px;
    background-color: #f8c30b;
    border-radius: 50%;
    position: absolute;
    bottom: -5px;
    left: -5px;
    z-index: 99;
}

.circle-big {
    display: block;
    width: 20px;
    height: 20px;
    background-color: rgba(255, 255, 255, .6);
    border-radius: 50%;
    transform: translate(-50%, 50%);
    bottom: 0;
    left: 0;
    position: absolute;
}

.cases-three-wrapper {
    height: 800px;
    background-image: url('../images/case-4.jpg');
    overflow: hidden;
}

.cases-three-wrapper h3 {
    margin-top: 140px;
    font-size: 30px;
    color: #333333;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cases-three-wrapper h3::after {
    margin-top: 29px;
    content: '';
    width: 122px;
    height: 3px;
    background-color: #f8c30b;
}

.swiper-self-wrapper {
    margin-top: 100px;
}

.swiper-self-wrapper .swiper-slide {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.swiper-self-wrapper .swiper-slide div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;
}

.swiper-self-wrapper .swiper-slide P {
    margin-top: 50px;
    width: 155px;
    text-align: center;
    font-size: 16px;
    line-height: 30px;
    color: #333333;
}

.swiper-self-wrapper .swiper-pagination {
    margin: 79px auto 0 auto;
    position: unset;
}

.swiper-self-wrapper .swiper-pagination-bullet {
    width: 40px;
    height: 4px;
    background-color: #999999;
    border-radius: unset;
    margin-left: 10px;
    outline: none;
}

.swiper-self-wrapper .swiper-pagination-bullet-active {
    background-image: linear-gradient(0deg, #f8c30b 0%, #ffcf29 100%);
}

.b-line {
    width: 120px;
    line-height: 25px;
    color: #ffffff;
    text-align: center;
    margin-top: 62px;
    position: relative;
}

.b-line span {
    display: block;
    width: 115px;
    height: 42px;
    border: solid 1px #f8c30b;
    border-top: none;
    border-left: none;
    transform: translateX(-50%);
}

/* details */

.product-details-wrapper {
    padding: 50px;
    background-color: #fff;
}

.product-details {
    display: flex;
}

.product-video {
    width: 420px;
  
}
.video-big .swiper-slide{
    width: 100% !important;
}

.video-big video {
    width: 100%;
    border-radius: 8px;
    outline: none;

    
}
#thumbs{
    border: 1px solid yellow;
}

.video-small img {
    width: 100%;
    border-radius: 8px;
}

.pdoduct-details {
    margin-left: 53px;
}

.pdoduct-details h3 {
    width: 100%;
    color: #f3bd02;
    font-size: 24px;
    margin-top: 39px;
    padding-bottom: 24px;
    border-bottom: 1px solid #f2f2f2f2;
}

.pdoduct-details h4 {
    font-size: 20px;
    line-height: 36px;
    color: #333333;
    margin-top: 40px;
}

.pdoduct-details p {
    color: #333333;
    line-height: 34px;
    font-size: 16px;
}

.product-function {
    margin-top: 40px;
    display: flex;
}

.product-dt {
    color: #333333;
    font-size: 20px;
    display: flex;
    align-items: center;
    height: 20px;
    position: relative;
    margin-top: 27px;
    flex-shrink: 0;
}

.product-dt::after {
    content: '';
    width: 25px;
    height: 1px;
    background-color: #f8c30b;
    position: absolute;
    right: -56%;
}

.function-details {
    display: flex;
    border-left: 1px solid #f2f2f2;
    margin-left: 32px;
    padding: 20px 60px 45px 52px;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
}

.function-details li {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.function-details li p {
    width: 160px;
    height: 40px;
    background-color: #f0f0f0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.function-details li img {
    margin-top: 20px;
}

.product-characteristic {
    display: flex;
}

.product-characteristic ul {
    border-left: 1px solid #f2f2f2;
    margin-left: 32px;
    padding: 20px 60px 40px 52px;
}

.product-characteristic ul li {
    font-size: 16px;
    line-height: 36px;
    color: #333333;
}

.product-application {
    display: flex;
}

.application-details {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-left: 1px solid #f2f2f2;
    margin-left: 32px;
    padding: 20px 0px 0 52px;
}

.application-details li {
    width: 284px;
}

.application-details li img {
    width: 100%;
    border-radius: 8px;
}

.application-details li p {
    padding: 20px 0;
    display: flex;
    align-items: center;
}

.application-details li p::before {
    content: '';
    width: 18px;
    height: 1px;
    /* background-color: #999999; */
    margin-right: 5px;
}

@media(max-width:1200px) {
    .lead-common-content {
        width: 651px;
        margin: 35px auto 0 auto;
    }
    .lead-title h4 {
        font-size: 26px;
        margin-top: -30px;
    }
    .lead-title h3 {
        font-size: 50px;
    }
    .tab-wrapper p {
        padding: 15px;
        font-size: 18px;
    }
    .contact-us {
        width: 100%;
    }
    .contact-us-lr {
        width: 60%;
    }
    .contact-us-r {
        width: 40%;
    }
    .product-right p {
        width: 100%;
    }
    .product-left {
        width: 350px;
        flex-shrink: 0;
    }
    .cases-wrapper div {
        margin-top: 150px;
    }
    .cases-one-wrapper section {
        width: 85%;
    }
    .cases-one-wrapper section img {
        width: 100%;
    }
    .cases-two-wrapper section {
        width: 85%;
        margin: 80px auto 0 auto;
        justify-content: center;
    }
    .cases-two-wrapper section div:nth-child(2) {
        margin-left: unset;
        margin-top: 70px;
    }
    .cases-two-wrapper h3 {
        align-items: center;
    }
    .cases-two-wrapper section div:nth-child(1) {
        width: 100%;
        text-align: center;
    }
}

@media(max-width:1023px) {
    .tab-content-t {
        display: flex;
        flex-wrap: wrap;
    }
    .technical-features-right {
        margin-left: unset;
        margin-top: 20px;
    }
    .tab-wrapper p {
        padding: 5px;
        font-size: 16px;
    }
    .tab-content {
        margin-top: 30px;
    }
    .tab-content-b {
        margin-top: 60px;
    }
    .product-left {
        width: 250px;
    }
    .product-right p {
        margin-top: 15px;
        font-size: 14px;
        line-height: 25px;
    }
    .cases-one-wrapper section {
        flex-wrap: wrap;
        margin-top: 80px;
        justify-content: center;
    }
    .cases-one-wrapper section div:nth-child(2) {
        order: 1;
        width: 100%;
        align-items: center;
    }
    .cases-one-wrapper section div:nth-child(1) {
        order: 2;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .cases-one-wrapper p {
        width: 100%;
        text-align: center;
        margin-top: 30px;
    }
    .cases-one-wrapper section img {
        margin-top: 113px;
    }
    .cases-three-wrapper {
        height: unset;
    }
    .product-details {
        flex-wrap: wrap;
    }
    .pdoduct-details {
        margin-left: unset;
    }
    .product-video {
        width: 100%;
    }
    .video-big video {
        height: unset;
    }
    .product-function {
        flex-wrap: wrap;
        justify-content: center;
    }
    .product-dt::after {
        position: unset;
        right: unset;
        margin-top: 10px;
        width: 80px;
    }
    .product-dt {
        flex-direction: column;
        height: unset;
    }
    .function-details {
        border: none;
        margin-left: 0px;
        padding: 20px 0px 45px 0;
        width: 100%;
        flex-wrap: wrap;
    }
    .function-details li {
        width: 48%;
    }
    .function-details li img {
        width: 100%;
        border-radius: 8px;
    }
    .product-characteristic{
        flex-direction: column;
    }
    .product-characteristic ul {
       border: none;
        margin-left: unset;
        padding: 20px 0 40px 0;
    }
    .product-application{
        flex-direction: column;
    }
    .application-details {
        flex-wrap: wrap;
        justify-content: space-between;
        margin-left: unset;
        padding: 20px 0px 0 0;
        border: none;
    }
}

@media(max-width:996px) {
    .lead-common-content {
        width: 600px;
    }
    .lead-wrapper {
        padding: 20px 5px
    }
    .tab-wrapper {
        flex-wrap: wrap;
    }
    .tab-wrapper p {
        width: 100%;
        margin-bottom: 5px;
    }
    .img-product1 {
        width: 200px;
        height: 200px;
    }
    .img-product2 {
        width: 100px;
        height: 200px;
    }
    .b-line {
        display: none;
    }
}

@media(max-width:767px) {
    .lead-common-content {
        width: 98%;
    }
    .lead-title h4 {
        font-size: 16px;
        font-weight: bold;
        margin-top: 0px;
    }
    .lead-title h3 {
        font-size: 38px;
    }
    .tab-content-b ul {
        display: flex;
        flex-wrap: wrap;
    }
    .tab-content-b ul li {
        width: 100%;
    }
    .contact-us {
        flex-wrap: wrap;
        height: unset;
        margin: 20px auto 40px auto;
    }
    .contact-us-l {
        width: 100%;
        padding: 20px 5px;
    }
    .contact-us-r {
        width: 100%;
        padding: 60px 0;
    }
    .product-wrapper {
        flex-wrap: wrap;
        padding: 10px;
    }
    .product-left {
        width: 100%;
    }
    .product-right {
        width: 100%;
        margin-left: unset;
        margin-top: 20px;
    }
    .product-tab-wrapper ul {
        flex-wrap: wrap;
    }
    .product-tab-wrapper ul li {
        width: 100%;
        margin-bottom: 10px;
    }
    .exchange-wrapper form div {
        flex-wrap: wrap;
        margin-top: 10px;
    }
    .exchange-wrapper form div input:nth-child(1) {
        margin-right: unset;
    }
    .exchange-wrapper form div input {
        width: 100%;
        margin-bottom: 10px;
    }
    .exchange-wrapper {
        margin-top: 40px;
        padding: 15px 10px 80px 10px;
    }
    .customer-message-wrapper {
        padding: 10px 15px;
    }
    .message-title-wrapper {
        flex-wrap: wrap;
    }
    .message-title-wrapper div {
        flex-wrap: wrap;
    }
    .message-title-wrapper div p {
        font-size: 16px;
    }
    .message-content-wrapper {
        flex-wrap: wrap;
        margin-top: 10px;
    }
    .cases-wrapper div {
        width: 97%;
        margin-top: 100px;
    }
    .cases-wrapper div img {
        width: 80%;
        margin-top: 85px;
    }
    .cases-wrapper {
        height: 600px;
    }
    .cases-one-wrapper {
        height: 600px;
    }
    .cases-one-wrapper section {
        margin-top: 100px;
    }
    .cases-one-wrapper h3 {
        margin-top: unset;
    }
    .cases-one-wrapper section img {
        margin-top: 85px;
    }
    .cases-two-wrapper section div:nth-child(2) {
        width: 100%;
    }
    .cases-two-wrapper {
        height: 600px;
    }
    .cases-two-wrapper section div:nth-child(2) {
        margin-left: unset;
        margin-top: 55px;
    }
    .cases-two-wrapper section div p {
        margin-top: 30px;
    }
    .swiper-self-wrapper .swiper-slide div {
        width: 50%;
    }
    .function-details li {
        width: 100%;
    }
    .product-details-wrapper{
        padding: unset;
    }
    .application-details li {
        width: 100%;
    }
}